/* 多地址选择器 */
<template>
  <div class="multiple-region-select">
    <div class="el-switch-wrapper" v-show="switchShow">
      <el-switch v-model="switchVModel" :active-value="1" :inactive-value="0" active-color="#13ce66"
                 inactive-color="#909399"/>
    </div>
    <AllRegionSelect
      v-model="stringArrayValue"
      :label.sync="label"
      full-amount
      :disabled="!switchValue"
      placeholder="请选择限制地区"
      :class="{ 'clear-boreder-left': switchShow }"
      :level="level"
      :cascaderProps="ccdProps"
      :props="{ multiple:true }"
      style="width: 100%;"
    />
  </div>
</template>

<script>
export default {
  name: 'MultipleRegionSelect',
  props: {
    value: {
      type: Array,
      default: undefined
    },
    switchValue: {
      type: Number,
      default: 1
    },
    switchShow: {
      type: Boolean,
      default: true
    },
    level: {
      type: Number,
      default: 1
    },
    ccdProps: {
      type: Object,
      default () {
        return {}
      }
    },
  },
  computed: {
    switchVModel: {
      set (val) {
        // 禁用时清除已选择的值
        if (!val) {
          this.stringArrayValue = []
        }
        this.$emit('update:switchValue', val)
      },
      get () {
        return this.switchValue
      }
    },
  },
  data () {
    return {
      stringArrayValue: null,
      label: null,
      syncing: false,
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (n) {
        if (this.syncing) {
          this.syncing = false
        } else {
          this.stringArrayValue = n?.map(v => v.areaCode)
        }
      }
    },
    label (n) {
      this.syncing = true
      this.$emit('input', n ? n.map((v, i) => ({
        areaCode: this.stringArrayValue[i],
        areaName: v
      })) : null)
    }
  },
}
</script>

<style lang="scss" scoped>
.multiple-region-select {
  display: flex;
}

.el-switch-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  border: 1px solid #DCDFE6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  margin-right: -2px;
  z-index: 1;
}

.clear-boreder-left :deep(input) {
  border-left: none;
}

.clear-delete-but {
  margin-left: -2px;
  z-index: 1;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}

:deep(.el-cascader) {
  width: 100%;
}
</style>
